<script setup lang="ts">
defineOptions({
  name: "topInfo"
});
import { ref, reactive, onMounted } from "vue";
import weatherItem from "./weatherItem.vue";
import timeItem from "./timeItem.vue";
import {
  queryWeatherData,
  getFabZone,
  getReadersInZone,
  getPointNewValue,
  getPointsCurve,
  addRemake,
  remakeHistory,
  queryChildByTypeCodeAndItemValue,
  queryAreaWornings
} from "@/api/machineClass";

const emits = defineEmits(["showHistory"]);

const weatherData = ref<Record<string, any>>({});
const weatherForm = ref<{ num: string; type: string }>({
  num: "",
  type: "hour"
});
const visibleY2 = ref<boolean>(false);
const typeList = ref([
  {
    value: "hour",
    label: "小时"
  }
]);

const viewSpcDetail = () => {};

const editSpcY2 = () => {
  visibleY2.value = false;
};

const getWeatherData = async () => {
  const params: any = { diffHours: weatherForm.value.num || 0 };
  const data = await queryWeatherData(params);
  weatherData.value = data;
};

const showHistory = () => {
  emits("showHistory");
};

onMounted(async () => {
  await getWeatherData();
});
</script>

<template>
  <div class="top-info">
    <timeItem />
    <weatherItem :dataList="weatherData" @showHistory="showHistory" />
    <!-- <div class="top-info-right">
      <div class="right_btn">
        <px-button class="btn_item" type="primary" plain @click="viewSpcDetail">查看历史</px-button>
      </div>
      <div class="right_btn">
        <px-popover :visible="visibleY2" placement="left-start" title="设置环比周期" :width="290">
          <px-form :inline="true" :model="weatherForm">
            <px-row>
              <px-col :span="12">
                <px-form-item label="" prop="num" style="width: 120px">
                  <px-input v-model="weatherForm.num" placeholder="请输入" clearable />
                </px-form-item>
              </px-col>
              <px-col :span="12">
                <px-form-item label="" prop="type" style="width: 120px">
                  <px-select v-model="weatherForm.type" placeholder="请选择">
                    <px-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                  </px-select>
                </px-form-item>
              </px-col>
            </px-row>
          </px-form>
          <div style="margin: 0; text-align: right">
            <px-button size="small" text @click="visibleY2 = false">取消</px-button>
            <px-button size="small" type="primary" @click="editSpcY2">确定</px-button>
          </div>
          <template #reference>
            <px-button type="primary" text @click="visibleY2 = true">设置环比周期</px-button>
          </template>
        </px-popover>
      </div>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.top-info {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;

  .top-info-right {
    .right_btn {
      display: flex;
      align-items: center;
      justify-content: center;

      .btn_item {
        margin-bottom: 8px;
      }
    }
  }
}
</style>
